<template>
  <div>
    <div class="logo">
      <img :src="shop.logo" alt="" />
      <span class="name">{{ shop.name }}</span>
    </div>
    <div class="info">
      <div class="left">
        <div>
          <span class="sells">{{ shop.sells | countFilter }}</span>
          <span>总销量</span>
        </div>
        <div>
          <span class="fans">{{ shop.fans | countFilter }}</span>
          <span>全部宝贝</span>
        </div>
      </div>
      <div class="right">
        <div v-for="item in shop.score" :key="item.name">
          <span class="score-name">{{ item.name }}</span>
          <span
            class="score"
            :style="{
              color: item.isBetter === true ? '#ff8198' : '#81b38c',
            }"
            >{{ item.score }}</span
          >
          <span
            class="isBetter"
            :style="{
              backgroundColor: item.isBetter === true ? '#ff8198' : '#81b38c',
            }"
            >{{ item.isBetter === true ? "高" : "低" }}</span
          >
        </div>
      </div>
    </div>
    <div class="shop">
      <a>进店看看</a>
    </div>
  </div>
</template>

<script>
export default {
  name: "detailShopInfo",
  props: {
    shop: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  filters: {
    countFilter(sell) {
      return (sell = sell >= 10000 ? (sell / 10000).toFixed(1) + "万" : sell);
    },
  },
};
</script>

<style scoped>
.logo {
  height: 90px;
  display: flex;
  align-items: center;
  border-top: 3px solid #f1f0f0;
}
.logo img {
  height: 36px;
  border-radius: 50%;
  border: 1px solid #dddbdb;
  margin-left: 8px;
  margin-right: 8px;
}
.logo .name {
  color: #696a6b;
  font-size: 13px;
}
.info {
  display: flex;
  align-items: center;
}
.info .left,
.right {
  flex: 1;
  display: flex;
  align-items: center;
}
.left {
  border-right: 1px solid #e5e4e4;
}
.left div {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.left div .sells,
.fans {
  font-size: 16px;
  margin-bottom: 5px;
}
.right {
  flex-direction: column;
  align-items: flex-start;
}
.right div {
  margin: 2px 0;
}
.right span {
  display: inline-block;
}
.score-name {
  font-size: 13px;
  margin-left: 45px;
}
.score {
  width: 40px;
  margin-left: 9px;
}
.isBetter {
  padding: 2px;
  color: #ffffff;
  border-radius: 2px;
}
.shop {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
  border-bottom: 1px solid #e5e4e4;
}
.shop a {
  padding: 8px 25px;
  background-color: #f1f5fa;
  text-decoration: none;
}
</style>
